// src/APP.vue

<template>
<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>
</template>

<script lang="ts">
import { reactive, defineComponent, computed } from 'vue'
export default defineComponent({
  name: 'APP',
  setup() {
    const author = reactive({
      name: 'John Doe',
      books: [
        'Vue 2 - Advanced Guide',
        'Vue 3 - Basic Guide',
        'Vue 4 - The Mystery'
      ]
    })

    const publishedBooksMessage = computed(() => author.books.length > 0 ? 'Yes' : 'No')

    return {
      author,
      publishedBooksMessage
    }
  }
})